<template>
  <div>
    <el-form :model="dataForm"  @keyup.enter.native="showSummary">

      <el-form-item style="margin-bottom: 0">
        <i class="el-upload__text" style="font-size: 19px;margin-left: 4px;color: #6f7180">患者时间轴</i>
      </el-form-item>

      <el-form-item style="width: 30%" prop="userId">
        <el-input  style="width: 70%" v-model="dataForm.searchItemValue" placeholder="输入病人ID"></el-input>
        <el-button type="primary" @click="showSummary">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex">
      <div class="box" style="width: 880px;margin-top: 38px;">
        <div style="flex: 1;width: 80px;height: 40px" v-for="(log, index1) in dataList" :key="index1">
          {{index1}}
        </div>
      </div>
      <div class="horizonScroll">
        <div style="display: flex">
          <div style="flex:1;height: 300px;" v-for="(item, index) in time" :key="index">
            <div class="box" >
              <div class="box" v-if="times.indexOf(item) !== -1" style="margin-bottom: 10px">{{' ' + parseTime(item) + ' '}}</div>
              <div class="box" v-else style="margin-bottom: 26px"></div>
              <div style="flex: 1;width: 80px;height: 40px;border-top: #909399 solid;border-bottom: #909399 0.5px solid;margin: 5px 0 -5px 0" v-for="(log, index1) in dataList" :key="index1">
                <div style="flex:1 ;width: 80px" v-if="log.indexOf(item) !== -1"><el-tag style="margin-top: 3px">{{index1}}</el-tag></div>
              </div>
            </div>
          </div>
        </div>
        <div style="height: 20px">
        </div>
      </div>
    </div>
    <!--    <div style="margin-left: 110px ;display: flex">-->
    <!--      <div class="box" v-for="(item, index) in time" :key="index">-->
    <!--            <span>{{' ' + item + ' '}}</span></div>-->
    <!--    </div>-->
  </div>
</template>
<script>
import 'overlayscrollbars/css/OverlayScrollbars.css'
import { OverlayScrollbarsPlugin } from 'overlayscrollbars-vue'
export default {
  name: '',
  data () {
    return {
      dataForm: {searchItemValue: ''},
      dataList: {},
      times:[],
      time: [],
      dataListLoading: false
    }
  },
  components: {
    OverlayScrollbarsPlugin
  },
  methods: {
    parseTime (time) {
      return new Date(time).toLocaleDateString().replace(/[/]/g,"-")
    },
    processTime (type) {
      let left = this.times[1]
      let right = this.times[this.times.length - 1]
      let day = 1000*60*60*24
      while (left < right) {
        this.time.push(left)
        left = left + day
      }
      console.log(this.time)
      switch (type) {
        case 'week': {
          break
        }
        case 'month': {
          break
        }
        case '3month': {

        }
        case '6month': {
          break
        }
        case 'year': {
          break
        }
        case '7year': {
          break
        }

      }
    },
    showSummary () {
      if (this.dataForm.searchItemValue === '') {
        this.$message({
          type: "error",
          message: 'userId没有输入！'
        })
      } else {
        this.$http({
          url: this.$http.adornUrl('/get/time/line'),
          method: 'get',
          params: {patientId:this.dataForm.searchItemValue}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataListLoading = true
            for (let item in data.data) {
              for (let j in data.data[item].content) {
                if (this.times.indexOf(data.data[item].date) === -1) {
                  this.times.push(Date.parse(data.data[item].date))
                }
                let name = data.data[item].content[j]
                this.$set(this.dataList, name, [])
              }
            }
            for (let item in data.data) {
              for (let j in data.data[item].content) {
                let name = data.data[item].content[j]
                if (this.dataList[name].indexOf(Date.parse(data.data[item].date)) === -1) {
                  this.dataList[name].push(Date.parse(data.data[item].date))
                }
              }
            }
            delete this.dataList['出生']
            this.processTime()
            this.dataListLoading = false
          }
        })
      }
    }
  }
}
</script>
<style lang="scss">
.box {
  flex:1
}
.horizonScroll {
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
  scroll-behavior: smooth;
  margin-bottom: -19px;
  flex: 8;
}
.horizonScroll ::-webkit-scrollbar {
  padding-top: 20px;
  width: 20px;
}
.horizonScroll ::-webkit-scrollbar-thumb {
  padding-top: 20px;
  height: 25px;
}
</style>
